<template>
    <div>
        <div id="container"></div>
        <div class="info">
            <h4 id='status'></h4><hr>
            <p id='result'></p><hr>
            <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    mounted() {
        // this.showCityInfo()
        this.getLocal()
    },
    methods: {
        getLocal(){
            var map = new AMap.Map('container', {
                resizeEnable: true
            });
            AMap.plugin('AMap.Geolocation', () => {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：5s
                    buttonPosition:'RB',    //定位按钮的停靠位置
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition((status,result)=>{
                    if(status=='complete'){
                        this.onComplete(result)
                    }else{
                        this.onError(result)
                    }
                });
            });
        },
        //解析定位结果
        onComplete(data) {
            document.getElementById('status').innerHTML='定位成功'
            var str = [];
            str.push('定位结果：' + data.position);
            str.push('定位类别：' + data.location_type);
            if(data.accuracy){
                str.push('精度：' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            document.getElementById('result').innerHTML = str.join('<br>');
        },
        //解析定位错误信息
        onError(data) {
            document.getElementById('status').innerHTML='定位失败'
            document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
        },
        // showCityInfo() {
        //     var map = new AMap.Map("container", {
        //         resizeEnable: true,
        //         center: [116.397428, 39.90923],
        //         zoom: 13
        //     });
        //     //实例化城市查询类
        //     var citysearch = new AMap.CitySearch();
        //     //自动获取用户IP，返回当前城市
        //     citysearch.getLocalCity(function(status, result) {
        //         if (status === 'complete' && result.info === 'OK') {
        //             if (result && result.city && result.bounds) {
        //                 var cityinfo = result.city;
        //                 var citybounds = result.bounds;
        //                 document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
        //                 //地图显示当前城市
        //                 map.setBounds(citybounds);
        //             }
        //         } else {
        //             document.getElementById('info').innerHTML = result.info;
        //         }
        //     });
        // }
    }
}
</script>

<style scoped>
    #container {
        /* height: 600px; */
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .info {
        top: 7em;
    }
</style>